/* Base candidate */

/* Layout
------------------------------------------------------- */
#source-ui {
  box-shadow: rgba(0,0,0,0.1) -2px 0px 0px;
}

#docs:target ~ #drawers {
  -webkit-transform:translateX(0%);
     -moz-transform:translateX(0%);
      -ms-transform:translateX(0%);
          transform:translateX(0%);
  visibility: visible;
}

#docs:target ~ #drawers #docs-drawer ~ .drawer {
  -webkit-transform:translateX(100%);
     -moz-transform:translateX(100%);
      -ms-transform:translateX(100%);
          transform:translateX(100%);
}

#docs:target ~ #drawers > * {
  display:block;
}


/* Reference/docs pane
------------------------------------------------------- */
#reference-vector_tiles section .type   { color: #8a8acb; } /* fill purple */
#reference-shapefile section .type    { color: #3887be; } /* fill blue */
#reference-csv section .type  { color: #56b881; } /* fill green */
/* #reference-vector_tiles section .type   { color: #8a8acb; } /* fill purple */
/* #reference-geojson section .type   { color: #ee8a65; } /* fill orange */
/* #reference-occi section .type     { color: #ee6565; } /* fill red */

#reference-vector_tiles .section-name   { border-right-color: #8a8acb; } /* fill purple */
#reference-shapefile .section-name    { border-right-color: #3887be; } /* fill blue */
#reference-csv .section-name { border-right-color: #56b881; } /* fill green */
/* #reference-vector_tiles .section-name   { border-right-color: #8a8acb; } /* fill purple */
/* #reference-occi .section-name   { border-right-color: #ee8a65; } /* fill orange */
/* #reference-ogr .section-name     { border-right-color: #ee6565; } /* fill red */


#reference .section-name {
  border-right-width: 5px;
  border-right-style: solid;
  text-transform: capitalize;
}

#reference .section-name + section {
  border-top: 1px solid rgba(0,0,0,0.25);
}

#reference section.source-ref:not(.active):hover {
  background: rgba(0,0,0,.05);
}

.reference-entry { margin-bottom: 3px;}

#reference section.active a,
#reference .details { display: none; }
#reference section.active { background-color: rgba(0,0,0,.15);}
#reference section.active .details { display: block;}


/* Button toggles
------------------------------------------------------- */
a.docs-y { display:none; }
#docs:target      ~ * a.docs-y { display:inline-block; }
#docs:target      ~ * a.docs-n { display:none; }


/* Data list pane
------------------------------------------------------- */
.offpane-button { margin-left: 5px;}

.layer-content {
  top: 90px;
}

[draggable='true'] {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

/* Sortable states */
.sortable-dragging {
  display:block;
  position:relative;
  background:#444;
  border:1px solid rgba(0,0,0,0.1);
  border-radius:4px;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

.sortable-placeholder {
  background: rgba(0,0,0,.25);
  padding: 15px;
  border-radius: 0;
}

.empty-state.visible {
  display: block;
  padding: 10px;
  position: relative;
}

/* Editor pane
------------------------------------------------------- */

#layers .disable-mask { height: 50px; }

.editor.pane {
  opacity: 0;
  z-index: -1;
}

.editor.pane.target {
  opacity: 1;
  z-index: 100;
}

/* Panes
------------------------------------------------------- */

input.toggle-conf:checked   ~ nav label.toggle-conf,
input.toggle-fields:checked ~ nav label.toggle-fields,
input.toggle-sql:checked    ~ nav label.toggle-sql {
  background: #404040;
}

.pane.target div.conf,
.pane.target div.fields { display:none; }

input.toggle-conf:checked ~ div.conf { display: block; }
input.toggle-fields:checked ~ div.fields { display: block; }

/* Fields pane
------------------------------------------------------- */

section:not(.field) + .empty-state { margin: 20px; display: block;}

/* SQL pane
------------------------------------------------------- */
.editor div.sql {
  position:absolute;
  top:60px; bottom:0px; width:100%;
  display: block;
  visibility: hidden;
  }
.editor .CodeMirror { top: 50px; }

.CodeMirror-linenumber { color: rgba(255,255,255,.5);}
input.toggle-sql:checked ~ div.sql { visibility:visible; }
input.toggle-sql:checked ~ div.sql .CodeMirror { visibility:visible; }

/* XRay toggle
------------------------------------------------------- */
.xrayswatch,
.xrayinspector {
  box-shadow:inset 0px 0px 0px 2px rgba(0,0,0,0.2);
  cursor: pointer;
  }
.xrayswatch:not(.disabled)::before { content: '';}
.xrayswatch.disabled { background-color:rgba(0,0,0,0.1) !important; }
.xrayswatch.disabled::before { background-color:rgba(0,0,0,0.1) !important; }
.xrayinspector::before { visibility:hidden; }
.xrayinspector:hover::before { visibility:visible; }
.xrayinspector.active::before { visibility:visible; }

/* Miscellaneous
------------------------------------------------------- */

